<script setup>

import {onBeforeMount, onBeforeUpdate, onMounted, onUpdated, ref} from "vue";

const count = ref(1);
function countAdd(){
  count.value++;

};

// 生命周期钩子
onBeforeMount(()=>{
  console.log('挂载之前',count.value,document.getElementById("btn01"))
})
onMounted(()=>{
  console.log('挂载完毕',count.value,document.getElementById("btn01"))
})
onBeforeUpdate(()=>{
  console.log('更新之前',count.value,btn01.value.innerHTML)
  console.log('更新前',count.value,count.value)
  console.log('更新前btn01内容',document.getElementById("btn01").innerHTML)

})
onUpdated(()=>{
  console.log('更新完毕',count.value,btn01.value.innerHTML)
})

</script>

<template>
<button id="btn01" @click="countAdd">点 {{count}}</button>
</template>

<style scoped>

</style>